<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<style type="text/css">
			table{
				margin: 100px auto 0;
				border: 2px solid red;
				border-radius: 15px;
				background-color: #EEE685;
			}
			input{
				width: 246px;
				height: 60px;
				color: blue;
				font-size: 22px;
				border: 2px solid red;
				padding: 0 10px;
				outline: none;
				border-radius: 15px;
				text-align: right;
			}
			button{
				width: 60px;
				height: 50px;
				outline: none;
				border: 2px solid red;
				border-radius: 15px;
				background-color: #000;
				color: #fff;
				font-weight: bold;
				font-size: 22px;
			}
			button::selection{
				color: #fff;
			}
			button:hover{
				color: #0f0;
				border-color: #0f0;
			}
			button:active{
				color: dodgerblue;
				border-color: dodgerblue;
				box-shadow: 0 0 5px 5px dodgerblue;
			}
			.dengyv{
				height: 104px;
			}
			.ac,
			.ce,
			.dengyv{
				background-color: #ff6700;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" cellpadding="5px" id="butCon"> <!--onclick="butCon()"-->
			<tr>
				<td colspan="4"><input type="text" value="0" /></td>
			</tr>
			<tr>
				<td><button class="ac" >AC</button></td><!--onclick="del()"-->
				<td><button class="ce" >CE</button></td><!--onclick="back()"-->
				<td><button>*</button></td>
				<td><button>/</button></td>
			</tr>
			<tr>
				<td><button>7</button></td>
				<td><button>8</button></td>
				<td><button>9</button></td>
				<td><button>-</button></td>
			</tr>
			<tr>
				<td><button>4</button></td>
				<td><button>5</button></td>
				<td><button>6</button></td>
				<td><button>+</button></td>
			</tr>
			<tr>
				<td><button>1</button></td>
				<td><button>2</button></td>
				<td><button>3</button></td>
				<td rowspan="2"><button class="dengyv" >=</button></td><!--onclick="eva()"-->
			</tr>
			<tr>
				<td><button>00</button></td>
				<td><button>0</button></td>
				<td><button>.</button></td>
			</tr>
		</table>
		<script type="text/javascript">
			var tex = "";
			var end = "";
			$(document).ready(function(){
				$("#butCon").click(function(){
					var con = event.srcElement.innerText;
					if(con == "CE" || con == "AC" || con == "="){
						return;
					}
					tex += event.srcElement.innerText;
					$("input").val(tex);
				});
				$(".dengyv").click(function(){
					end = eval(tex);
					if(tex == ""){
						end = "0";
					}
					$("input").val(end);
					tex = "";
				});
				$(".ac").click(function(){
					tex = "";
					$("input").val(0);
				});
				$(".ce").click(function(){
					if(tex != ""){
						tex = tex.slice(0,-1);
						$("input").val(tex);
					}
				});
			});
		</script>
		<!--<script type="text/javascript">
			var tex = "";
			var end = "";
			var inp = document.getElementsByTagName('input')[0];
			function butCon(){
				var con = event.srcElement.innerText;
				if(con == "CE" || con == "AC" || con == "="){
					return;
				}
				tex += event.srcElement.innerText;
				inp.value = tex;
			}
			function eva(){
				end = eval(tex);
				if(tex == ""){
					end = "0";
				}
				inp.value = end;
				tex = "";
			}
			function del(){
				tex = "";
				inp.value = "0";
			}
			function back(){
				if(tex != ""){
					tex = tex.slice(0,-1);
					inp.value = tex;
				}
			}
		</script>-->
	</body>
</html>
